<div class="animations">
  <h1>Animation</h1>
  Toggle All Animations <input type="checkbox" [checked]="!animationsDisabled" (click)="toggleAnimations()" />
  <nav>
    <a id="home" routerLink="./home" routerLinkActive="active">Home</a>
    <a id="about" routerLink="./about" routerLinkActive="active">About</a>
    <a id="open-close" routerLink="./open" routerLinkActive="active">Open/Close</a>
    <a id="status" routerLink="./status" routerLinkActive="active">Status Slider</a>
    <a id="toggle" routerLink="./toggle" routerLinkActive="active">Toggle Animations</a>
    <a id="enter-leave" routerLink="./enter" routerLinkActive="active">Enter/Leave</a>
    <a id="auto" routerLink="./auto" routerLinkActive="active">Auto Calculation</a>
    <a id="heroes" routerLink="./filter" routerLinkActive="active">Filter/Stagger</a>
    <a id="hero-groups" routerLink="./groups" routerLinkActive="active">Hero Groups</a>
  </nav>
  <div class="router" [@routeAnimations]="prepareRoute(outlet)">
    <router-outlet #outlet="outlet"></router-outlet>
  </div>
</div>
